<!--
 * @Description: 工单详情
 * @Author: charles
 * @Date: 2021-12-14 22:10:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-06 16:49:40
-->
<template>
  <div class="orderDetail">
    <el-page-header @back="$router.go(-1)" content="工单详情"></el-page-header>

    <div class="order_content" style="margin-top: 20px">
      <el-form label-width="150px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="工单编号:">
              {{ order.id }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="问题设备:">
              {{ order.device_name }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="报修时间:">
              {{ order.create_time | fmtTime }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报修原因:">
              <div v-if="order.bill_why == null">暂无</div>
              <div v-else>
                {{ order.bill_why }}
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="报修类型:">
              {{ order.type }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工单状态:">
              <el-tag
                size="mini"
                v-if="order.status == '待接单'"
                type="danger"
                >{{ order.status }}</el-tag
              >
              <el-tag
                size="mini"
                v-else-if="order.status == '进行中'"
                type="warning"
                >{{ order.status }}</el-tag
              >
              <el-tag size="mini" v-else type="success">{{
                order.status
              }}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工人姓名:">
              <div v-if="order.account_name == null">暂无</div>
              <div v-else>
                {{ order.account_name }}
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="完成时间:">
              <div v-if="order.finish_time == null">暂未完成</div>
              <div v-else>
                {{ order.finish_time | fmtTime }}
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="开始图片:">
              <div v-if="order.begin_photos[0] == null">暂无图片</div>
              <div v-else>
                <img
                  style="width: 100px; height: 100px; margin: 10px"
                  :src="order.begin_photos[0]"
                />
                <img
                  style="width: 100px; height: 100px; margin: 10px"
                  :src="order.begin_photos[1]"
                />
                <img
                  style="width: 100px; height: 100px; margin: 10px"
                  :src="order.begin_photos[2]"
                />
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="结束图片：">
              <div v-if="order.end_photos[0] == null">暂无图片</div>
              <div v-else>
                <img
                  style="width: 100px; height: 100px; margin: 10px"
                  :src="order.end_photos[0]"
                />
                <img
                  style="width: 100px; height: 100px; margin: 10px"
                  :src="order.end_photos[1]"
                />
                <img
                  style="width: 100px; height: 100px; margin: 10px"
                  :src="order.end_photos[2]"
                />
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      order: {},
      resData: {},
      params: {
        page: 1,
        pageSize: 50,
      },
    };
  },
  methods: {},
  created() {
    this.order = this.$route.query;
  },
};
</script>

<style scoped>
.order_content {
  padding-top: 15px;
  padding-left: 5px;
  -moz-box-shadow: 0 0 10px #ccc;
  -webkit-box-shadow: 0 0 10px #ccc;
  box-shadow: 0 0 10px #ccc;
}
</style>